<template>
    <div class="snap-panle">
        <span>捕捉</span>
        <el-switch v-model="open" />
    </div>
    
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import Draw from 'ol/interaction/Draw.js';
import Snap from 'ol/interaction/Snap.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
const props = defineProps({
  map: {
    type: Object,
    required: true
  }
})
const open = ref(false);

onMounted(() => { 
    console.log('map', props.map)
    const map = props.map;
    
    let layers = map.getLayers()
    let wfs = layers.getArray().find(layer => layer.get('name') === 'wfsLayer')

    // 创建一个空白的矢量图层
    const vector = new VectorLayer({
        source: new VectorSource(),
        style: {
          'fill-color': 'rgba(255, 255, 255, 0.2)',
          'stroke-color': '#ffcc33',
          'stroke-width': 2,
          'circle-radius': 7,
          'circle-fill-color': '#ffcc33',
        },
    });
    map.addLayer(vector);
    const  point = new Draw({
        source: vector.getSource(),
        type: 'Point'
    });
    map.addInteraction(point);

const snap = new Snap({
  source: wfs.getSource(),
  pixelTolerance: 40,
  intersection: false,
});



snap.on('snap', () => { 
    console.log('snap')
});
snap.on('unsnap', () => {
    console.log('unsnap')
});

// map.addInteraction(snap);

// map.removeInteraction(snap);
watch(open, (newVal) => {
    if (newVal) {
        props.map.addInteraction(snap);
    } else {
        props.map.removeInteraction(snap);
    }
})
})





</script>

<style scope>
.snap-panle {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #b9acac;
}
</style>